import React from "react";
import VoteFooter from "./VoteFooter";
import VoteMain from "./VoteMain";
import ThemeContext from "../ThemeContext";
/**
 * 第一步：创建ThemeContext.js
 * 第二步：让祖先组件Vote，具备状态和修改状态的方法，同时还需要把这些信息，存储到上下文中！
 * 第三步：在后代组件中，我们需要获取上下文中的信息
 *  + VoteMain: 获取信息绑定即可
 *  + VoteFooter：获取信息，把获取的函数(修改组件状态的函数)，在点击支持/反对的时候执行！！
 */
class Vote extends React.Component {
    state = {
        supNum: 10,
        oppNum: 5
    }
    change = (type) => {
        let { supNum, oppNum } = this.state;
        if (type === 'sup') {
            this.setState({
                supNum: supNum + 1
            })
            return
        }
        this.setState({
            oppNum: oppNum + 1
        })
    }

    render() {
        let { supNum, oppNum } = this.state;
        /**
         * 基于上下文对象中，提供的Provider组件，用来：
         *  + 向上下文中存储信息：value属性指定的值就是要存储的信息
         *  + 当祖先组件更新，render重新执行，会把最新的状态值，再次存储到上下文对象中！！
         */
        return <ThemeContext.Provider value={
            {
                supNum,
                oppNum,
                change: this.change
            }
        }>
            <div className="vote-box">
                <div className="header" style={{
                    display: 'flex',
                }}>
                    <h2 className="title">React是很棒的前端框架</h2>
                    <span className="num" style={{
                        paddingTop: 23,
                        marginLeft: 56
                    }}>{supNum + oppNum}</span>
                </div>
                <VoteMain />
                <VoteFooter />
            </div>
        </ThemeContext.Provider>
    }
}
export default Vote